<template>
  <div class="dynamic">
    <div class="vertical first"></div>
    <div class="vertical second"></div>
    <div class="vertical third"></div>
    <div class="vertical fourth"></div>
    <div class="vertical fifth"></div>
  </div>
</template>

<script>

// 动态的直播的效果
import { reactive } from 'vue'

export default {
  name: 'Livedynamic',
  components:{
  },

  setup(){
    const data = reactive({
      
    })
    return {
      data
    }
  }
   
  
}
</script>

<style lang="scss" scoped>
.dynamic {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 1rem;
  height: .7rem;
  transform: rotate(180deg);
}
.vertical {
  width: .1rem;
  height: .7rem;
  background: linear-gradient(90deg, #78C4FC 0%, #0C69E9 100%);
}
.first{
    animation: firstLineAnimation 1s infinite;
}
.second{
    animation: secondLineAnimation 1s infinite;
}
.third{
    animation: thirdLineAnimation 1s infinite;
}
.fourth{
    animation: fourthLineAnimation 1s infinite;
}
.fifth{
    animation: fifthLineAnimation 1s infinite;
}


// 第一条竖线的动画
@keyframes firstLineAnimation{
    0% { height: .4rem; }
    25% { height: .7rem; }
    50% { height: 0; }
    100% { height: .4rem; }
}
@-webkit-keyframes firstLineAnimation {
    0% { height: .4rem; }
    25% { height: .7rem; }
    50% { height: 0; }
    100% { height: .4rem; }
}

// 第二条竖线的动画
@keyframes secondLineAnimation{
    0% { height: .7rem; }
    50% { height: 0rem; }
    100% { height: .7rem; }
}
@-webkit-keyframes secondLineAnimation {
    0% { height: .7rem; }
    50% { height: 0rem; }
    100% { height: .7rem; }
}


// 第三条竖线的动画
@keyframes thirdLineAnimation{
    0% { height: .0; }
    50% { height: .7rem; }
    100% { height: 0; }

}
@-webkit-keyframes thirdLineAnimation {
    0% { height: .0; }
    50% { height: .7rem; }
    100% { height: 0; }
}


// 第四条竖线的动画
@keyframes fourthLineAnimation{
    0% { height: .6rem; }
    25% { height: .7rem; }
    50% { height: 0; }
    100% { height: .6rem; }
}
@-webkit-keyframes fourthLineAnimation {
    0% { height: .6rem; }
    25% { height: .7rem; }
    50% { height: 0; }
    100% { height: .6rem; }
}


// 第五条竖线的动画
@keyframes fifthLineAnimation{
    0% { height: .2rem; }
    25% { height: .7rem; }
    50% { height: 0; }
    100% { height: .2rem; }
}
@-webkit-keyframes fifthLineAnimation {
    0% { height: .2rem; }
    25% { height: .7rem; }
    50% { height: 0; }
    100% { height: .2rem; }
}

</style>
